.container  {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #3c3c3c;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
        touch-action: manipulation;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
         text-size-adjust: none;
    height: 100%;
    overflow: hidden;
}
#pay-form {
    height: 100%
}
.bg {
    position: absolute;
    top: 0;
    display: block;
    width: 10rem;
    height: auto;
    z-index: -1000;
}
.body {
    /*position: relative;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    /*-webkit-box-orient: vertical;*/
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       /*-moz-box-orient: vertical;*/
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
       -moz-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    width: 10rem;
    /*height: 100%;
    z-index: 10;
    overflow: hidden;*/
}
.title, 
.price,
.pay-btn {
    /*position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);*/
    margin: 0 auto;
}
.title {
    display: block;
    width: 9rem;
    margin-top: 30px;
}
.title p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    overflow: hidden;
    width: 100%;
    line-height: 38px;
    margin: 0;
    color: #333;
    font-size: 32px;
    text-align: center;
}
.pay-detail {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
    color: #999;
    text-decoration: underline;
}
.price {
    margin: 40px;
    display: block;
    color: #04be02;
    top: 25%;
    font-size: 36px;
    font-weight: bold;
}
.pay-btn {
   /* position: absolute;
    bottom: 5%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);*/
    position: relative;
    display: block;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    background: #04be02;
    color: white;
    line-height: 30px;
    font-size: 24px;
    padding: 10px 3rem;
    width: 9rem;
    margin-bottom: .6rem;
    border: none;
    white-space: nowrap;
}
.detail-body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 10rem;
    height: 100%;
    background: #f5f5f5;
    /*background: #333;*/
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.close-detail {
    position: absolute;
    bottom: 5%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
             -ms-transform: translate(-50%, -50%);
              -o-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
    display: block;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    background: white;
    color: #04be02;
    border: 1px solid #04be02;
    line-height: 30px;
    font-size: 24px;
    padding: 10px 3rem;
    width: 9rem;
    height: 50px;
    white-space: nowrap;
}
.detail-content {
    border: 1px solid #ddd;
    -webkit-border-radius: 5px;
            border-radius: 5px;
    background: white;
    height: 72%;
    width: 9rem;
    margin: 30px auto 0;
    overflow: hidden;
}
.detail-html-box {
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    padding: 20px 31px 20px 20px;
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
.detail-html-box .ctn {
    overflow-x: hidden;
}

.form-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: auto;
    margin: .5rem auto;
    width: 9rem;
    max-height: 8rem;
    max-height: 43vh;
    border: 1px solid #ddd;
    padding: 0 10px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}
.form-box .form-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}
.form-box .form-row:nth-child(n + 1){
    margin-top : 15px;
}
.form-box .form-row:nth-last-child(1) {
    margin-bottom: 15px;
}
.form-box label {
    display: inline-block;
    width: 40%;
    height: 100%;
    line-height: 100%;
    color: #666;
    font-size: 16px;
    padding-right: 8px;
    text-align: right;
}
.form-box .form-row input {
    display: inline-block;
    width: 100%;
    margin: 0;
}
/*.form-box .form-row input:focus {
    position: fixed;
    top: 30px;
    width: 9rem;
}*/
.more-price-box {
    width: 9rem;
    margin: 30px auto 0;
}
.more-price {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
/*    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;*/
}
.more-price li {
    width: 33%;
}
.more-price input {
    display: none;
}
.more-price label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    padding: 10px 0;
    font-size: 16px;
    color: #666;
    width: 6em;
    margin: 8px auto;
}
.more-price input:checked + label {
    border: 1px solid slateblue
}
.price-title {
    display: none;
}